<template>
  <el-form ref="formRef" :model="state.form" :rules="rules" :show-message="false" label-width="135px" v-loading="state.loading">
    <el-row :gutter="20">
      <el-col :span=12>
        <el-form-item label="主体类型" prop="merchantType">
          <x-select options="merchant_type" v-model="state.form.merchantType"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="证件类型" prop="certType">
          <x-select options="cert_type" v-model="state.form.certType"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="证件编号" prop="certNo">
          <el-input v-model="state.form.certNo" placeholder="请输入企业证件编号" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="法人身份证类型" prop="legalCertType">
          <x-select options="legal_cert_type" v-model="state.form.legalCertType"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="法人姓名" prop="legalName">
          <el-input v-model="state.form.legalName" placeholder="请输入法人姓名" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="法人身份证号" prop="legalCertNo">
          <el-input v-model="state.form.legalCertNo" placeholder="请输入法人身份证" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="联系人的职责" prop="contactTags">
          <x-select options="contact_tags" v-model="state.form.contactTags"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="联系人类型" prop="contactType">
          <x-select options="contact_type" v-model="state.form.contactType"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="商户使用服务" prop="services">
          <x-select options="services" :multiple="true" v-model="state.form.serviceList"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="商户类别码MCC" prop="mcc">
          <el-input v-model="state.form.mcc" placeholder="请输入商户类别码MCC" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label="审核状态" prop="merchantExpandStatus">
          <el-button type="text" disabled>{{
              state.form.formatIncomingStatusDesc
            }}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <div class="x-row-reverse">
    <el-button @click="onSubmit" type="primary" style="margin-left: 10px">提交</el-button>
    <el-button @click="onQueryAudit" plain type="primary">审核查询</el-button>
    <el-button @click="onSubmitAudit" plain type="primary">提交审核</el-button>
    <el-button @click="onCheck" plain type="primary">预校验</el-button>
    <el-button @click="onCancel">取消</el-button>
  </div>
</template>

<script setup name="incoming-form">
import useStore from '@/stores/modules/platform/company';
const store = useStore();
import {defineExpose} from "vue";
// 提交表单数据
const state = reactive({
  loading: false,
  statusType: [{label: "正常", value: "0"},{label:"冻结", value: "9"}],
  form:{
    companyId: '',
    merchantType: '',
    certType: '',
    certNo: '',
    legalName: '',
    legalCertNo: '',
    contactTags: '',
    contactType: '',
    serviceList: [],
    mcc: '7512',
    merchantExpandId: '',
    merchantExpandStatus: 'NOT'
  }
});

const rules = ref({
  merchantType: [{ required: true, message: '请选择主体类型', trigger: 'blur' }],
  certType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
  certNo: [{ required: true, message: '请输入证件编号', trigger: 'change' }],
  legalName: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
  legalCertNo: [{ required: true, message: '请输入法人身份证号', trigger: 'blur' }],
  contactTags: [{ required: true, message: '请选择联系人职责', trigger: 'blur' }],
  contactType: [{ required: true, message: '请选择联系人类型', trigger: 'blur' }],
  serviceList: [{ required: true, message: '请选择商户使用服务', trigger: 'blur' }],
  mcc: [{ required: true, message: '请输入商户类别码MCC', trigger: 'blur' }],
});

const formRef = ref(null);
/**
 * 表单验证
 * @param callback
 * @returns {Promise<void>}
 */
const doValidate = async (callback) => {
  await formRef.value.validate((valid, fields) => {
    if (! valid) {
      let errMsg = Helper.getFirstMessage(fields);
      if (errMsg) {
        Msg.error(errMsg)
      }
      callback(false)
      return
    }

    callback(window.JSON.parse(window.JSON.stringify(state.form)))
  })
}

/**
 * 预校验
 **/
const onCheck = async () => {
  let result = await store.checkMerchantExpand(state.form.merchantExpandId)
  if(result.success) {
    Msg.success("进件预校验审核通过，可以提交审核");
    return;
  }

  Msg.error(result.failReason);
}

/**
 * 预校验
 **/
const onQueryAudit = async () => {
  let result = await store.queryMerchantExpand(state.form.merchantExpandId)
  Msg.success(result.merchantExpandStatusDesc);
  if(result.merchantExpandStatus == "99") {
    let data = await store.getMerchantExpand(state.form.companyId);
    if(data) {
      render(data, false);
    }
  }
}

/**
 * 预校验
 **/
const onSubmitAudit = async () => {
  let result = await store.submitMerchantExpand(state.form.merchantExpandId)
  if(result) {
    Dialog.close();
  }
}

const onSubmit = () => {
  submit();
}

const onCancel = () => {
  Dialog.close();
}

/**
 * 保存
 * @returns {Promise<void>}
 */
const submit = async () => {
  await doValidate(async (form) => {
    if (form == false) {
      return
    }

    if(! Helper.emptyArray(form.serviceList)) {
      form.services = form.serviceList.join(",");
    }

    let result =  await store.saveMerchantExpand(form)
    if (result) {
      state.form.merchantExpandId = result;
    }
  })
}


/**
 * 获取数据
 * @param data
 */
const render = (data, disabled) => {

  state.disabled = disabled;
  if(Helper.emptyJson(data)) {
    return
  }

  if(! Helper.empty(data.services)) {
    data.serviceList = data.services.split(",");
  }

  state.form = Object.assign(state.form, data);
  state.form.formatIncomingStatusDesc = store.formatIncomingStatus(state.form.merchantExpandStatus)
}

defineExpose({render, submit})

</script>

<style scoped>

</style>
